<template>
    <div class="header_nav">
        <div
            v-for="(item, index) in navTabs.lists"
            :ref="tabsRefs.set"
            :key="index"
            :class="['header_nav_tab', navTabs.activeIndex === index ? 'active' : '']"
            @click="activateTab(item)"
            @contextmenu.prevent="onContextmenu(item)"
        >
            {{ item.title }}
            <template v-if="navTabs.lists.length > 1">
                <el-icon class="close-icon" @click.stop="onClose(item)"><Close /></el-icon>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { IMenu } from '@/store/useMenu'
import type { RouteLocationNormalized } from 'vue-router'
import { useTemplateRefsList } from '@vueuse/core'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { useMenu } from '@/store'
import { storeToRefs } from 'pinia'

const route = useRoute()
const router = useRouter()
const menuNavTab = useMenu()
const { navTabs } = storeToRefs(menuNavTab)
const tabsRefs = useTemplateRefsList<HTMLDivElement>()

const updateTag = (newRoute: RouteLocationNormalized | IMenu) => {
    menuNavTab.addRouteNav(newRoute)
    menuNavTab.setActiveRoute(newRoute)
}

const onClose = (m: IMenu) => {
    menuNavTab.closeTab(m)
    if (navTabs.value!.activeRoute?.path === m.path) {
        const lastRoute = navTabs.value.lists[0]
        if (lastRoute) {
            router.push({ path: lastRoute.path, query: lastRoute.query, params: lastRoute.params })
        } else {
            router.push({ path: '/admin' })
        }
        return
    }
    menuNavTab.setActiveRoute(navTabs.value!.activeRoute!)
}

//TODO tab鼠标右键点击事件(待处理)
const onContextmenu = (m: IMenu) => {
    console.log('执行了点击')
}

// 激活tab
const activateTab = (menu: IMenu) => {
    if (route.path === menu.path) return
    router.push({ path: menu.path, query: menu.query, params: menu.params })
}

// 路由更新
onBeforeRouteUpdate((to) => {
    updateTag(to)
})

onMounted(() => {
    updateTag(route)
})
</script>

<style scoped lang="scss">
.header_nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    &::-webkit-scrollbar {
        height: 5px;
    }
    &::-webkit-scrollbar-thumb {
        background: #eaeaea;
        border-radius: var(--el-border-radius-base);
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    &:hover {
        &::-webkit-scrollbar-thumb:hover {
            background: #c8c9cc;
        }
    }
    .header_nav_tab {
        line-height: 50px;

        padding-left: 15px;
        padding-right: 15px;
        cursor: pointer;
        &.active {
            background-color: var(--pt-main-bg);
            color: #777099;
        }
    }
    .close-icon {
        padding: 2px;
        margin: 2px 0 0 4px;
        &:hover {
            background: var(--menu-bg-color);
            color: var(--pt-color-white) !important;
            border-radius: 50%;
        }
    }
}
</style>
